<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_元素溢出</title>
    <style>
        .txt{
            background-color: #fdbb2d;
            width: 300px;
            /*强制文本不换行*/
            white-space: nowrap;
            /*裁掉多余的文本*/
            overflow: hidden;
            /*添加省略号*/
            text-overflow: ellipsis;
        }
        .over{
            background-color: lime;
            width: 1000px;
            height: 200px;
            overflow: visible;
            overflow: hidden;
            overflow: scroll;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="txt" title="阿巴巴巴巴巴巴巴阿巴巴">
        lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid animi asperiores at atque beatae blanditiis consequatur consequuntur cum cumque delectus deleniti dicta dignissimos distinctio dolorem dolores doloribus ea earum eligendi enim eos esse est et eveniet expedita facilis fuga fugiat
    </div>
    <div class="over">
        <img src="img/1.png" >
    </div>
</body>
</html>